<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">    <title>01文字阴影</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        code{
            vertical-align: 50%;
        }
        #shadow div{
            display: inline-block;
            text-shadow: 5px 5px 5px gray;
            color: navy;
            font-size: 50px;
            font-weight: bold;
        }
        #shadow div:nth-of-type(1){
            text-shadow: 5px 5px 5px gray;
        }
        #shadow div:nth-of-type(2){
            text-shadow: -5px -5px 5px gray;
        }
        #shadow div:nth-of-type(3){
            text-shadow: 2px 1px 2px gray;
        }
        #shadow div:nth-of-type(4){
            text-shadow: 5px 5px 20px gray;
        }
        #shadow div:nth-of-type(5){
            text-shadow: 3px 2px 0 gray;
        }
        #shadow div:nth-of-type(6){
            text-shadow: 3px 2px 3px pink;
        }
        #shadow div:nth-of-type(7){
            text-shadow: 2px 2px 0px red,
                        10px 9px 1px #ffb08b,
                        25px 17px 2px #f1ee00,
                        50px 28px 3px #00bc0d,
                        100px 40px 4px #a3ddff;
        }

        #shadowInImg{
            position: relative;
        }
        #shadowInImg div{
            position: absolute;
            top:30%;
            left:130px;
            color: #ffffff;
            font-size: 42px;
            font-weight: bold;
            text-shadow: 3px 3px 5px black;
        }
    </style>
</head>
<body>
<h1>3-1文字阴影</h1>
<h3>文字阴影，text-shadow的4个参数分别是：横向位移，纵向位移，模糊度，颜色</h3>
<section id="shadow">
<div>你好！</div><code>text-shadow: 5px 5px 5px gray;</code><br>
<div>你好！</div><code>text-shadow: -5px -5px 5px gray;</code><br>
<div>你好！</div><code>text-shadow: 2px 1px 2px gray;</code><br>
<div>你好！</div><code>text-shadow: 5px 5px 20px gray;</code><br>
<div>你好！</div><code>text-shadow: 3px 2px 0 gray;</code><br>
<div>你好！</div><code>text-shadow: 3px 2px 3px pink;</code><br>
<div>你好！</div>
    <code>
        text-shadow: 2px 2px 0px red,
        10px 9px 1px #ffb08b,
        25px 17px 2px #f1ee00,
        50px 28px 3px #00bc0d,
        100px 40px 4px #a3ddff;
    </code>
    <br>
    <br><br><br><br>
</section>
<h3>图片上的文字阴影</h3>
<code>
    #shadowInImg{
        position: relative;
    }
    #shadowInImg div{
        position: absolute;
        top:30%;
        left:130px;
        color: #ffffff;
        font-size: 42px;
        font-weight: bold;
        text-shadow: 3px 3px 5px black;
    }

</code>
<section id="shadowInImg">
<div>你好！</div>
<img src="sky.jpg">
    <p>图片上添加阴影可以让字看起来更清晰
</section>
</body>
</html>